<template>
  <div class="s-canvas">
   <canvas id="s-canvas" :width="contentWidth" :height="contentHeight" style="margin-left:6px">
   </canvas>
  </div>
 </template>
 <script lang="ts">
  export default {
   name: 'SIdentify',
   props: {
    identifyCode: {
     type: String,
     default: '1234'
    },
    fontSizeMin: {
     type: Number,
     default: 16
    },
    fontSizeMax: {
     type: Number,
     default: 40
    },
    backgroundColorMin: {
     type: Number,
     default: 180
    },
    backgroundColorMax: {
     type: Number,
     default: 240
    },
    colorMin: {
     type: Number,
     default: 50
    },
    colorMax: {
     type: Number,
     default: 160
    },
    lineColorMin: {
     type: Number,
     default: 40
    },
    lineColorMax: {
     type: Number,
     default: 180
    },
    dotColorMin: {
     type: Number,
     default: 0
    },
    dotColorMax: {
     type: Number,
     default: 255
    },
    contentWidth: {
     type: Number,
     default: 70
    },
    contentHeight: {
     type: Number,
     default: 30
    }
   },
   methods: { // 生成一个随机数    
    randomNum(min: number, max: number) : number{
     return Math.floor(Math.random() * (max - min) + min)
    },
    // 生成一个随机的颜色
    randomColor(min: number, max: number) : string{
     var r = this.randomNum(min, max)
     var g = this.randomNum(min, max)
     var b = this.randomNum(min, max)
     return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
    drawPic() {
     let canvas = document.getElementById('s-canvas')
     if(canvas) {
            let ctx:any = canvas.getContext('2d')
            ctx.textBaseline = 'bottom'
          // 绘制背景
          ctx.fillStyle = this.randomColor(
            this.backgroundColorMin,
            this.backgroundColorMax)
          ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
          // 绘制文字
          for (let i = 0; i < this.identifyCode.length; i++) {
            this.drawText(ctx, this.identifyCode[i], i)
          }
          this.drawLine(ctx)
          this.drawDot(ctx)
        }
    },
    drawText(ctx: any, txt: any, i: number) {
   ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
   ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) +'px SimHei';
   var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
   var y = this.randomNum(this.fontSizeMax,this.contentHeight - 5)
   var deg = this.randomNum(-10, 10)
     // 修改坐标原点和旋转角度 
     ctx.translate(x, y)
     ctx.rotate(deg * Math.PI / 280)
     ctx.fillText(txt, 0, 0)
     // 恢复坐标原点和旋转角度
     ctx.rotate(-deg * Math.PI / 280)
     ctx.translate(-x, -y)
    },
    drawLine(ctx: any) {
     // 绘制干扰线 
     for (let i = 0; i < 3; i++) {
      ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
      ctx.beginPath()
      ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
      ctx.lineTo(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight))
      ctx.stroke()
     }
    },
     drawDot(ctx: any) {
     // 绘制干扰点  
     for (let i = 0; i < 10; i++) {
      ctx.fillStyle = this.randomColor(0, 6)
      ctx.beginPath()
      ctx.arc(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
      ctx.fill()
     }
    } 
   },
   watch: {
    identifyCode() {
     this.drawPic()
    }
   },
   mounted() {
    this.drawPic()
   }
  }
 </script>